<template>
	<div>
		<!-- 轮播 -->
		<van-swipe :autoplay="4000">
			<van-swipe-item v-for="(item,i) in carouselItems" :key="i" @click="onDetail(item)">
				<van-image :src="APIDomainName + item.img" width="100%" />
			</van-swipe-item>
		</van-swipe>

		<!-- 快捷入口 前端模板中写死-->
		<van-grid>
			<van-grid-item icon="/images/menu1.png" text="新闻资讯" to="/news/list" />
			<van-grid-item icon="/images/menu2.png" text="图片分享" to="/images" />
			<van-grid-item icon="/images/menu3.png" text="商品购买" to="/productList" />
			<van-grid-item icon="/images/menu4.png" text="留言反馈" to="/message" />
			<van-grid-item icon="/images/menu5.png" text="视频专区" to="/working" />
			<van-grid-item icon="/images/menu6.png" text="联系我们" to="/contact" />

		</van-grid>

		<!-- 商品推荐 -->
		<homeProduct title="商品推荐" icon="gift-o" :productList="recommendedItems"></homeProduct>

		<!-- 新品到达 -->
		<homeProduct title="新品到达" icon="vip-card-o" :productList="newArrialItems"></homeProduct>

		<!-- 销售排行 -->
		<homeProduct title="销售排行" icon="award-o" :productList="topSaleItems"></homeProduct>
	</div>
</template>

<script>
	//导入封装后的接口	
	import { getHomeDataAPI } from "@/api/home.js";
	import homeProduct from "./components/homeProduct.vue"

	export default {
		components: {
			homeProduct
		},
		data() {
			return {
				// 轮播数据
				carouselItems: [],
				//商品推荐
				recommendedItems: [],
				//新品到达
				newArrialItems: [],
				// 销售排行
				topSaleItems: [],
			};
		},
		created() {
			//调用接口，获取首页轮播项数据	
			getHomeDataAPI().then(result => {
				console.log(result)
				this.carouselItems = result.data.carouselItems;
				this.recommendedItems = result.data.recommendedItems;
				this.newArrialItems = result.data.newArrialItems;
				this.topSaleItems = result.data.topSaleItems;
			}).catch(() => {});
		},
		methods: {
			onDetail(item) {
				this.$router.push({ name: 'productDetail', query: { id: item.product_id } })
			}
		}
	};
</script>

<style lang="less" scoped>
	// 如果需要可以这样设置vant组件的样式，试试在浏览器检查代码元素
	.van-grid {
		background-color: white;
	}

	// 样式穿透设置vant组件的样式，试试在浏览器检查代码元素
	/deep/ .van-grid-item__text {
		color: green;
		font-size: 16px;
	}
</style>